<template>
  <div>
    <el-form :inline="true"
             ref="form"
             :model="form"
             class="add-form"
             label-min-width="110px">
      <h3>基础信息</h3>
      <hr />
      <el-row>
        <el-col :span="8"
                class="el-height"><span class="labels">货主:</span>{{form.cargoOwnerName}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">车船号:</span>{{form.transhipNo}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">运输方式:</span>{{form.transportWay | _filterTransportModeType}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">物资发放时间:</span>{{form.startOffDate}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计到达时间:</span>{{form.forecastArrivalDate}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">始发站:</span>{{form.startStationName}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计总件数:</span>{{form.forecastNum}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计总重量（吨）:</span>{{form.forecastWeight}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">备注:</span>{{form.remark}}</el-col>
      </el-row>
      <h3>物资信息</h3>
      <hr />
      <el-row>
        <el-button type="primary" class="button"
                   @click="handleDialogForm">分配内转车</el-button>
      </el-row>
      <div v-for="(item,index) of form.goodsVos"
           :key="index">
        <el-row>
          <el-col :span="8"
                  class="el-height"><span class="labels">入库方式:</span>{{item.inWayName}}</el-col>
          <el-col :span="8"
                  class="el-height"><span class="labels">到达位置:</span>{{item.startLocation}}</el-col>
          <el-col :span="8"
                  v-show="item.inWay==='ZXDJ' || item.inWay==='SYDJ'"
                  class="el-height"><span class="labels">目的位置:</span>{{item.targetLocation}}</el-col>
        </el-row>
        <el-table :data="item.detailVos"
                  border
                  stripe
                  max-height="550"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="50"></el-table-column>
          <el-table-column prop="cargoName"
                           label="品名"
                           min-width="120"></el-table-column>
          <el-table-column prop="normStr"
                           label="规格"
                           min-width="120"></el-table-column>
          <el-table-column prop="material"
                           label="材质"
                           min-width="120"></el-table-column>
          <el-table-column prop="madeBy"
                           label="生产厂家"
                           min-width="120"></el-table-column>
          <!-- <el-table-column prop="inNum"
                           label="预计件数"
                           min-width="120"></el-table-column>
          <el-table-column prop="inWeight"
                           label="预计重量（吨）"
                           min-width="120"></el-table-column> -->
          <el-table-column prop="inNum"
                           label="交接件数"
                           min-width="120"></el-table-column>
          <el-table-column prop="transportNum"
                           label="已运输件数"
                           min-width="120"></el-table-column>
          <el-table-column prop="transportWeight"
                           label="已运输重量"
                           min-width="120"></el-table-column>
        </el-table>
      </div>
      <h3>内转车分配信息</h3>
      <hr />
      <el-table :data="form.baseVos"
                border
                stripe
                max-height="550">
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="carNo"
                         label="内转车号"
                         min-width="120"></el-table-column>
        <el-table-column prop="inWayName"
                         label="入库方式"
                         min-width="120"></el-table-column>
        <el-table-column prop="loadNum"
                         label="运输件数"
                         min-width="120"></el-table-column>
        <el-table-column prop="loadNum"
                         label="运输重量"
                         min-width="120"></el-table-column>
        <el-table-column prop="cargoNames"
                         label="运输物资"
                         min-width="120"></el-table-column>
        <el-table-column prop="tragetLocaltion"
                         label="作业点"
                         min-width="120"></el-table-column>
        <!-- <el-table-column prop="status"
                         label="作业状态"
                         min-width="120">
          <template slot-scope="scope">
            {{ scope.row.status | _filterShiftStatus }}
          </template>
        </el-table-column> -->
        <el-table-column label="操作"
                         align="center"
                         width="180"
                         fixed="right">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="handleViewDialogForm(scope.row)">查看</el-button>
            <el-button type="text"
                       size="small"
                       @click="handleCancelDialogForm(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-form>
    <div class="back">
      <el-button plain
                 type="info"
                 @click="handleRouterPush({path:'/goods/accept',name:'接发管理工作台'})">返回</el-button>
    </div>
    <!-- 分配内转车 -->
    <distribute-car-form ref="distributeCarForm"
                         @load="loadData"></distribute-car-form>
    <!-- 查看内转车 -->
    <view-distribute-car-form ref="viewDistributeCarForm"></view-distribute-car-form>
    <!-- 取消内转车 -->
    <cancel-distribute-car-form ref="cancelDistributeCarForm"></cancel-distribute-car-form>
  </div>
</template>

<script>
import { getDetailCar } from '@/api/accept/carry'
import distributeCarForm from './distributeCarForm'
import viewDistributeCarForm from './viewDistributeCarForm'
import cancelDistributeCarForm from './cancelDistributeCarForm'

export default {
  name: 'interchangeDistribution',
  components: { distributeCarForm, viewDistributeCarForm,cancelDistributeCarForm },
  data() {
    return {
      form: this.clearForm(),
      dialogForm: false,
      showList: true,
      showRecord: false,
      activeIndex: '1',
      multipleSelection: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    clearForm() {
      return JSON.parse(sessionStorage.getItem('ITEMS'))
    },
    loadData() {},
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //分配内转车
    handleDialogForm() {
      let data = this.multipleSelection
      if (data.length === 0) {
        this.$message({ type: 'error', message: '请选择一个表格的数据' })
      } else {
        this.$refs.distributeCarForm.form.baseVos = this.multipleSelection
        this.$refs.distributeCarForm.form.transhipNo = this.form.transhipNo //车船号
        this.$refs.distributeCarForm.form.inWayName = data[0].inWayName //入库方式
        this.$refs.distributeCarForm.form.planNo = data[0].planNo //编号
        this.$refs.distributeCarForm.dialogForm = true
      }
    },
    //查看分配内转车
    handleViewDialogForm(item) {
      getDetailCar(item.id).then(res => {
        this.$refs.viewDistributeCarForm.form = res.data
      })
      this.$refs.viewDistributeCarForm.dialogForm = true
    },
    //取消分配内转车
    handleCancelDialogForm(item) {
      getDetailCar(item.id).then(res => {
        console.log('查看详情', res.data)
        this.$refs.cancelDistributeCarForm.form = res.data
      })
      this.$refs.cancelDistributeCarForm.dialogForm = true
    },
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-height {
  margin: 10px 0;
}
h3 {
  margin: 10px 0;
}
.labels {
  margin-right: 5px;
}
</style>
